<template>
	<m-layout :isShow="false" gap="0 0 120">
		<!-- 顶部操作栏 -->
		<view class="header-top" :style="{ background: topStyle }">
			<view class="nav flex-between">
				<m-icon size="34" type="icon-fanhui" @click="Jump()"></m-icon>
				<template v-if="scrollTop > 0 &&goodsInfo.wards!==1 && goodsInfo.wards!==3">
					<view class="tables" :style="{ opacity: topOpt }">
						<text :class="{ active: scrollIdx == 0 }" @click="tapScrollFn(0)">宝贝</text>
						<text :class="{ active: scrollIdx == 1 }" @click="tapScrollFn(1)">评价</text>
						<text :class="{ active: scrollIdx == 2 }" @click="tapScrollFn(2)">详情</text>
					</view>
				</template>
			</view>
		</view>
		<!-- 轮播商品图 -->
		<view class="swiper-box">
			<swiper class="swiper" @change="swiperChange">
				<template v-for="(item, idx) in goodsInfo.bannerpicurl">
					<swiper-item :key="item" :current="currentIndex">
						<image :src="item" mode=""></image>
					</swiper-item>
				</template>
			</swiper>
			<view class="numBox flex" v-if="goodsInfo.bannerpicurl">
				<text>{{ currentIndex + 1 }}</text>
				<text>/{{ goodsInfo.bannerpicurl.length }}</text>
			</view>
		</view>
		<m-block bgColor="unset" class="main" minHeight="1000" radius="0" gap="10 20" spa="0 0 0 0">
			<!-- 商品信息 -->
			<m-block class="goods-info" gap="10 24 30" spa="16 0">
				<!-- 价目 -->
				<view class="price-box flex-between mt-12">
					<view class="flex">
						<view class="">
							<m-price :size="[42,24]" :value="(goodsInfo.wards==2 || goodsInfo.wards==4)&&attr.price?attr.price:goodsInfo.price"
								color="#FA2B47" />
						</view>
						<!-- <view class="ml-12" v-if="goodsInfo.wards!=1">
							<text class="fs21 ml-4" style="color:#333">代理价</text>
							<m-price :size="[28,24]" :value="attr.price3?attr.price3:goodsInfo.price3" color="#333" />
						</view> -->
					</view>
					<view class="right">
						<text>{{ goodsInfo.totalsell | tranNumber2(0) }}人已购买</text>
					</view>
				</view>
				<!-- <view class="pticeTag flex" v-if="goodsInfo.wards!=1">
					<text class="pl-100">{{goodsInfo.isdls?'已享受代理价':'第二次购买可享受代理价'}}</text>
				</view> -->
				<view class="title flex-column mt-12">
					<text>{{goodsInfo.goodsname}}</text>
					<text v-if="goodsInfo.wards!==1 && goodsInfo.wards!==3 &&attr.goodsname"
						class="fs21 fw-400 mt-12">已选：{{attr.goodsname}}</text>
				</view>
				<!-- 商品简述 -->
				<view class="des" v-if="goodsInfo.sketch">
					<view :class="otpClass">
						{{ goodsInfo.sketch }}
					</view>
					<!-- <view class="flex ptb-12 jc-center" v-if="otpClass" @click="otpClass=''">
						<text>展开</text>
					</view>
					<view class="flex ptb-12 jc-center" v-else @click="otpClass='otp2'">
						<text>收起</text>
					</view> -->
				</view>
				<!-- 	<view class="collect flex-around">
					<view @click="collection">
						<m-icon size="32" :color="isCollection ? '#FA2B47' : '#999999'" type="icon-shoucang1"></m-icon>
						<text
							:style="{ color: isCollection ? '#FA2B47' : '#666666' }">{{isCollection?'已收藏':"收藏"}}</text>
					</view>
					<view @click="copyGoods">
						<m-icon size="32" type="icon-fenxiang"></m-icon>
						<text>分享</text>
					</view>
				</view> -->
			</m-block>
			<!-- 打印专区 -->
			<template v-if="(goodsInfo.wards==1 || goodsInfo.wards==3)&&Number(goodsInfo.discount)">
				<m-block gap="30 24" spa="20 0 10" class="flex fs28">
					<text>购买可获得：</text>
					<view class="flex">
						<text class="mr-8">{{ attr.discount?attr.discount:goodsInfo.discount | integer(2) }} {{goodsInfo.wards==1?"打印积分":'AI积分'}}</text>
						<!-- <m-image :size="[60,60]" src="../../../static/images/pages/wallet/balance06.png" /> -->
					</view>
				</m-block>
			</template>
			<!-- 规格信息 -->
			<m-block class="specification" gap="20 24 16" spa="16 0">
				<template v-if="goodsInfo.wards !== 1 && goodsInfo.wards !== 3">
					<view class="ptb-12" v-if="goodsInfo.attr&&goodsInfo.attr.length >0" @click="selectSpe('goPay')">
						<text class="left">选择</text>
						<template v-if="attrList.length <= 0">
							<text>当前商品库存不足</text>
						</template>
						<template v-else>
							<text class="fw-600 fs25">已选：{{ attr['goodsname'] }} X{{buycount}}</text>
						</template>
						<m-icon size="22" type="icon-qianjin"></m-icon>
					</view>
					<view class="flex-between ptb-12">
						<text class="left">快递费：</text>
						<view class="">
							<text
								:style="{color:goodsInfo.yf?'#f95f5f':''}">{{ goodsInfo.yf ? `￥${goodsInfo.yf}` : '免运费' }}</text>
						</view>
					</view>
					<view class="flex-between ptb-12" @click="Jump('/pages/mine/address/address?isSelect=true')">
						<text class="left">配送至：</text>
						<view class="flex-1 fw-600 fs24">
							<view class="" v-if="nowId&&address.are">
								{{ address.are}}
							</view>
							<view class="" v-else>
								未选择收货地址
							</view>
						</view>
						<m-icon size="22" type="icon-qianjin"></m-icon>
					</view>
				</template>
				<template v-else>
					<view class="ptb-12 flex">
						<text class="ws-nowrap">可托管地区：</text>
						<view class="flex">
							<text class="mr-12" v-for="item in goodsInfo.attr">{{item.goodsname}}</text>
						</view>
					</view>
				</template>
			</m-block>
			<!-- 评价板块 -->
			<m-block class="rvaluate" gap="30 24" spa="16 0" v-if="goodsInfo.wards !== 1 && goodsInfo.wards !== 3">
				<view class="head flex-between">
					<text>评价<em v-if="CommentList.length">({{ CommentList.length }})</em></text>
					<view class="flex" v-if="goodsInfo.fine">
						<text>综合评分：</text>
						<text>
							<template v-for="item3 in goodsInfo.fine">
								<m-icon size="18" color="#FFAA01" type="icon-shoucangxuanzhong"></m-icon>
							</template>
						</text>
					</view>
				</view>
				<template>
					<template v-for="(item,index) in CommentList">
						<view class="rvaluate-u">
							<view class="user flex">
								<m-image :src="item.headpic" types="user"></m-image>
								<view class="right">
									<text>{{item.nickname}}</text>
									<view class="flex">
										<template v-for="item3 in item.gvalue">
											<m-icon size="18" color="#FFAA01" type="icon-shoucangxuanzhong"></m-icon>
										</template>
									</view>
								</view>
							</view>
							<view class="centent"><text class="otp2">{{item.content}}</text></view>
							<view class="img-box" v-if="item.picurl">
								<template v-for="cItem2 in item.picurl.split(',')">
									<image :src="cItem2" mode=""></image>
								</template>
							</view>
						</view>
					</template>
				</template>
				<template>
					<m-empty :list="CommentList" size="100" :iconShow="false" title="暂无评价内容"></m-empty>
				</template>
				<view class="r-footer flex-center" v-if="CommentList.length > 0">
					<view class="flex" @click="Jump('/pages/order/comment/comment?goodsId=' +goodsId )">
						<text>查看全部评价</text>
						<m-icon spa="0 0 0 10" size="22" type="icon-qianjin"></m-icon>
					</view>
				</view>
			</m-block>
			<!-- 商品描述 -->
			<m-block gap="30 24" spa="16 0" class="goodsDescription">
				<view class="h1">
					<m-icon type="" />
					<text>商品详情</text>
				</view>
				<view v-html="goodsInfo.content"></view>
			</m-block>
		</m-block>
		<!-- 底部按钮 -->
		<view class="footer">
			<!-- <view class="left flex-between flex-2">
				<template>
					<view class="box box1" @click="Jump('/pages/home/goodsShop/goodsShop?sid=' + goodsInfo.sid)">
						<m-icon color="#FA2B47" type="icon-dianpu1"></m-icon>
						<text class="box-text">店铺</text>
					</view>
				</template>
				<view class="box box2" @click="goChat()">
					<m-icon type="icon-kefu"></m-icon>
					<text class="box-text">客服</text>
				</view>
				<uni-badge class="uni-badge-left-margin" :text="cardNum" absolute="rightTop" :offset="[3, 3]"
					size="small">
					<view class="box" @click="Jump({ url: '/pages/cart/cart', mode: 4 })">
						<m-icon type="icon-gouwuche"></m-icon>
						<text class="box-text">购物车</text>
					</view>
				</uni-badge>
			</view> -->
			<view class="right flex flex-3">
				<template v-if="buyBtn">
					<!-- <m-button class="btn1" :loading="cartLoading" @click="selectSpe('card')">加入购物车</m-button> -->
					<m-button style="width: 200rpx;" class="btn2" @click="selectSpe('goPay')">立即购买</m-button>
				</template>
				<template v-else>
					<m-button class="ml-60 ptb-24" :disabled="true">
						<text class="fs21 text-grey">暂不能购买</text>
					</m-button>
				</template>
			</view>
		</view>

		<!-- 分享弹框 -->
		<!-- <uni-popup ref="copyShow" type="center">
			<view class="copy-popup flex-column">
				<view class="center flex-center"><text>复制连接成功，快去分享给好友吧</text></view>
				<view class="btn-box" @click="$refs.copyShow.close()">确定</view>
			</view>
		</uni-popup> -->

		<!-- 确定弹框 -->
		<uni-popup ref="popup" type="bottom">
			<m-block class="popup-goods" gap="36 24" radius="24 20 0 0">
				<view class="goods-info flex-between">
					<view class="left">
						<m-image size="150" :src="Picture" />
					</view>
					<view class="right flex-column flex-around">
						<template v-if="attr['stock'] > 0">
							<view class="h1">
								<view class="">
									<m-price :size="[38,24]" :unit="false" :value="goodsPrice['price']"
										color="#FA2B47" />
								</view>
								</m-price>
							</view>
							<text v-if="goodsInfo.wards!==1 && goodsInfo.wards!==3" class="stock">库存{{ attr['stock'] }}</text>
						</template>
						<template v-else>
							<text class="stock" v-if="goodsInfo.wards!==1 && goodsInfo.wards!==3">库存不足</text>
						</template>
					</view>
				</view>
				<!-- 属性列表 -->
				<view class="spec-box mtb-20" v-if="goodsInfo.wards!==1 && goodsInfo.wards!==3">
					<scroll-view scroll-y="true" class="swiper" :scroll-into-view="attrid">
						<template v-for="(item, idx) in attrList">
							<view class="spec1 flex-between" :id="item['id']"
								:class="{ active: attr['id'] == item['id'] }">
								<m-image size="60" :src="item['goodspicurl'].split(',')[0]" class="mr-12"></m-image>
								<view class="title flex-1 flex-between" @click="skuChoose(item)">
									<text class="goodsGuiGeName ">{{ item['goodsname'] }}</text>
									<m-price :value="item.price" :size="[28, 28]" color="#FA2B47"></m-price>
								</view>
							</view>
						</template>
					</scroll-view>
				</view>
				<view class="amount flex-between mb-24 mt-24">
					<text>数量</text>
					<uni-number-box v-model="buycount" :min="1" :max="attr['stock']" @change="changeValue" />
				</view>
				<view class="btn-box flex-between">
					<template v-if="buyBtn">
						<!-- 	<m-button class="btn1" :loading="cartLoading" @click="addCart"
							:type="attr['stock'] ? '' : 'falls'" :disabled="attr['stock']?false:true">加入购物车</m-button> -->
						<m-button class="btn2" @click="goPay" :disabled="attr['stock']||(goodsInfo.wards==1 || goodsInfo.wards==3)?false:true"
							:type="attr['stock']||(goodsInfo.wards==1 || goodsInfo.wards==3) ? 'primary' : 'falls'">立即购买</m-button>
					</template>
					<template v-else>
						<m-button class="ml-60 ptb-24" :disabled="true">
							<text class="fs21 text-grey">暂不能购买</text>
						</m-button>
					</template>
				</view>
			</m-block>
		</uni-popup>
	</m-layout>
</template>

<script>
	import { mapState } from 'vuex';
	import { Toast, doCopy } from '@/utils/tools.js';
	import { invUrl } from '@/common/baseconfig.js';
	import {
		GoodsFirst,
		ShopCar_Add,
		CollectGoods,
		isCollect,
		CommentByGoods,
		MallShopInfo,
		beforeCheck
	} from '@/api/Goods.js';
	export default {
		data() {
			return {
				copyShow: false, //复制连接弹窗
				goodsId: '', //商品id
				goodsInfo: {}, //商品信息

				goodsCommentList: [], //评论数据
				isCollection: false, // 是否收藏

				Picture: '',
				attrid: '', // 选中属性ID
				attrList: [],
				attr: {},


				cartLoading: false,
				buycount: 1, //购买数量
				currentIndex: 0, //轮播图标记

				scrollTop: 0,
				topStyle: 'rgba(255, 255, 255, 0)',
				topOpt: 0,
				tapScroll: [0, 0, 0, 0],
				scrollIdx: 0,
				CommentList: [],
				pageIndex: 1,
				pageSize: 4,
				otpClass: '', // otp2 
				// add 店铺信息
				shopInfo: {}, // 

			};
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo,
				cartList: state => state.goods.cartList,
				topNavHeight: state => state.general.topNavHeight,
				addressList: state => state.address.addressList,
				nowId: state => state.address.nowId
			}),
			address(val) {
				// console.log('val', val)
				let info = this.addressList.filter(item => {
					return item.id == this.nowId
				})
				return info[0] || ''
			},
			goodsPrice() {
				console.log('this.goodsInfo===>', this.goodsInfo)
				if (this.goodsInfo.wards == 2 || this.goodsInfo.wards == 4) {
					return this.attr ? {
						price: this.attr['price'],
						price3: this.attr['price3']
					} : {
						price: this.goodsInfo.price,
						price3: this.goodsInfo.price3
					}
				} else {
					return {
						price: this.goodsInfo.price,
						price3: this.goodsInfo.price3
					}
				}
			},
			cardNum() {
				return this.cartList.length;
			},
			// 购买前置条件
			buyBtn() {
				// containattr>0 attr.length=0 
				if (this.goodsInfo.containattr && this.goodsInfo.attr && !this.goodsInfo.attr.length) return false;
				if ((this.attr.giveqz == 1 && this.goodsInfo.isdls == 1) || this.attr.giveqz == 0 || (this.goodsInfo
						.attr && this.goodsInfo.attr.length == 0 && this.goodsInfo.giveqz == 0)) return true;
				return false;
			}
		},
		onLoad({ id, goodsId }) {
			this.goodsId = id || goodsId;
			this.init();
		},
		onShow() {},
		mounted() {},
		onPageScroll({ scrollTop }) {
			this.tapScroll.forEach((item, idxx) => {
				if (item <= scrollTop + 1) {
					this.scrollIdx = idxx;
				}
			});
			let a = scrollTop / 2 / 100;
			this.scrollTop = scrollTop;
			this.topStyle = `rgba(255, 255, 255, ${a})`;
			this.topOpt = `${a}`;
		},
		watch: {
			address(val, old) {
				// console.log('val.id,val.id', val.id,old.id)
				if (val.id == old.id) return;
				this.beforeCheckFn()
			},
			buycount() {
				this.beforeCheckFn()
			}
		},
		methods: {
			// 获取店铺信息
			// async getSellerDetail() {
			// 	const { success, data } = await MallShopInfo({
			// 		id: this.goodsInfo.sid
			// 	});
			// 	console.log('店铺信息===>', data, data.userid)
			// 	this.shopInfo = data
			// },
			async goChat() {
				// await this.getSellerDetail()
				// const kfID = this.shopInfo.userid; // 店铺ID
				const kfID = this.getConfig(999); // 平台客服ID
				const userID = this.userinfo.userid; // 当前用户ID
				if (Number(userID) == Number(kfID)) {
					return this.Toast('您已是客服')
				} else {
					let goodsInfo = {
						id: this.goodsInfo.id,
						goodsname: this.goodsInfo.goodsname,
						picurl: this.goodsInfo.picurl,
						price: this.goodsInfo.price,
						sid: this.goodsInfo.sid,
						attr: this.attr || '',
						wards: this.goodsInfo.wards,
						price3: this.goodsInfo.price3,
					}
					this.openURL({ openUrl: 'https://work.weixin.qq.com/kfid/kfcfc1ed477fc398781' })
					// this.Jump({
					// 	url: '/pages/chat/chat',
					// 	params: {
					// 		type: 2,
					// 		touid: kfID,
					// 		touserName: `平台客服`,
					// 		// touserName: `${this.shopInfo.shopname}客服`,
					// 		goodsInfo: JSON.stringify(goodsInfo)
					// 	}
					// })
				}
			},
			// 获取评价列表
			async GetCommentByGoods() {
				const { success, list, msg } = await CommentByGoods({
					gid: this.goodsId,
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
				});
				this.CommentList = list
			},
			tapScrollFn(item) {
				// this.scrollIdx = item;
				uni.pageScrollTo({
					scrollTop: this.tapScroll[item],
					duration: 130
				});
			},
			async getNode() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.rvaluate').fields({ rect: true });
				query.select('.goodsDescription').fields({ rect: true });
				query.exec(data => {
					if (data.length > 0) {
						const a = data.map(item => {
							return item.top - 44 - this.topNavHeight;
						}, []);
						this.tapScroll = [0, ...a];
					}
				});
			},
			async init() {
				// 获取商品详情数据
				await this.GoodsFirst();
				// await this.beforeCheckFn()
				// 查询是否收藏
				// await this.isCollect();
				// 获取评价列表
				await this.GetCommentByGoods();
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
				// 延迟到下次DOM更新循环后 执行
				if (this.goodsInfo.wards == 1 || this.goodsInfo.wards == 3) return // 如果是 打印专区 
				this.$nextTick(() => {
					// 获取页面数据  监听页面滑动位置
					this.getNode();
				});
			},
			// // 供应链商品运费查询
			async beforeCheckFn() {
				if (!this.goodsInfo['jh_gid']) return
				const { success, data: yunfei } = await beforeCheck({
					addrid: this.nowId
				}, [{
					"number": this.buycount,
					"sku": this.attr['jh_gid'] ? this.attr['jh_gid'] : this.goodsInfo['jh_gid']
				}])
				if (success) {
					this.goodsInfo.yf = yunfei[0]['freight']
				}
			},
			async copyGoods() {
				let url = invUrl + 'pages/home/goodsDetail/goodsDetail?goodsId=' + this.goodsInfo.id;
				const status = await this.doCopy(url, false);
				if (status) {
					this.$refs.copyShow.open();
				}
				console.log(status);
			},
			//打开规格弹窗
			selectSpe(type) {
				if(this.goodsInfo.wards==1 || this.goodsInfo.wards==3)  return  this.goPay();
				if (this.goodsInfo.attr.length > 0) {
					return this.$refs.popup.open();
				}
				const meth = {
					card: () => {
						this.addCart();
					},
					goPay: () => {
						this.goPay();
					}
				} [type];
				meth();
			},
			//获取索引
			swiperChange(e) {
				this.currentIndex = e.detail.current;
			},
			// 收藏商品
			async collection() {
				const res = await CollectGoods({
					goodsId: this.goodsInfo.id,
					collect: !this.isCollection,
					ctype: 1
				});
				this.Toast(res.msg);
				if (res.success) {
					this.isCollection = !this.isCollection;
				}
			},
			changeValue(e) {
				let n = this.attr['stock'] - e;
				if (n > 0) {
					this.buycount = e;
				} else {}
			},
			// 立即购买
			goPay() {
				console.log('this.attr', this.attr)
				const attrData = (this.goodsInfo.wards == 2 || this.goodsInfo.wards == 4) && this.attr && this.attr.id ? {
					attrGid: this.attr.jh_gid || 0,
					attrId: this.attr.id,
					attrname: this.attr.goodsname,
					attrPrice: this.attr.price,
					attrStock: this.attr.stock,
					attrsnum: this.attr.goodsnum,
					price: this.attr.price,
					price3: this.attr.price3,
					stock: this.attr.stock,
					goodspicurl: this.attr.goodspicurl.split(',')[0] || '',
				} : {
					stock:this.goodsInfo.stock,
					attrId: 0,
					attrsnum: 1,
				};

				const goods = {
					...this.goodsInfo,
					buycount: this.buycount,
					...attrData,
					from: 1,
				};
				this.$store.commit('goods/SET_PAYGOODS', [goods]);
				this.$refs.popup.close();
				this.Jump('/pages/order/sureOrder/sureOrder');
			},
			// 修改属性1
			skuChoose(item, idx) {
				this.attr = item;
				this.Picture = item['goodspicurl'].split(',')[0];
				this.beforeCheckFn()
			},
			// 添加购物车
			async addCart() {
				this.cartLoading = true;
				const { success, msg } = await ShopCar_Add({
					gid: this.goodsId,
					attrid: this.attr.id ? this.attr.id : 0,
					count: this.buycount
				});
				this.Toast(msg);
				this.cartLoading = false;
				this.$refs.popup.close();
			},
			// 商品详情
			async GoodsFirst() {
				try {
					const { data, success } = await GoodsFirst({
						id: this.goodsId
					});
					this.goodsInfo = data;

					//属性弹窗的默认图片
					if (data['attr'] && data['attr'].length == 0) return;
					this.attrList = data['attr'];
					if (data.wards == 1 || data.wards == 3) {
						this.attr = data['attr'][0] || {};
					} else {
						this.attr = data['attr'][0] || {};
					}
					this.Picture = this.attr['goodspicurl'].split(',')[0];
				} catch (e) {
					console.log('e', e)
				}
			},
			// 商品是否收藏
			async isCollect() {
				const { data, success, msg } = await isCollect({
					id: this.goodsId
				});
				if (msg == '已收藏') {
					this.isCollection = true;
				} else {
					this.isCollection = false;
				}
			}
		}
	};
</script>

<style lang="scss">
	.icp {
		color: #999;
	}

	.top-popup {
		position: absolute;
		top: 80rpx;
		left: 0;
		width: 100%;
		z-index: 999;
		padding: 0 24rpx;
		box-sizing: border-box;
	}

	.extra {
		position: relative;
		justify-content: space-around !important;

		&::after {
			content: '';
			display: block;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 1rpx;
			height: 57rpx;
			background: #e1e1e1;
		}

		.dl {
			// flex: 1;
			// position: relative;

			.dd {
				padding-left: 12rpx;

				text {
					display: block;
				}

				text:nth-of-type(1) {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}

				text:nth-of-type(2) {
					padding-top: 4rpx;
					font-size: 26rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #fa2f43;
				}
			}
		}

		.dl+.dl {
			padding-left: 60rpx;
		}
	}

	.integral-box {
		margin-top: 20rpx;
		background: #ffffff;
		border-radius: 20rpx;

		padding: 16rpx 25rpx;

		.hint {
			margin-left: 10rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;

			text:nth-of-type(1) {
				color: #333333;
			}

			text:nth-of-type(2) {
				color: #fa2b47;
			}
		}
	}

	.header-top {
		position: fixed;
		z-index: 9;
		top: var(--status-bar-height) 0 0;
		left: 0;
		width: 100%;

		.nav {
			padding: 20rpx 24rpx;
			box-sizing: border-box;
			background: rgba(255, 255, 255, 0);

			.mIcon {
				width: 42rpx;
				height: 42rpx;
				background: #ffffff;
				border-radius: 50%;
				text-align: center;
				line-height: 42rpx;
			}

			.right {
				view:nth-of-type(2) {
					margin-left: 20rpx;
				}
			}
		}

		.tables {
			flex: 1;
			opacity: 0;
			margin-left: 100rpx;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			text-align: center;

			text {
				position: relative;
				font-size: 28rpx;
				color: #999999;

				&:after {
					display: block;
					content: '';
					position: absolute;
					bottom: -10rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 0rpx;
					height: 4rpx;
					background: #fa2b47;
					transition: all 0.2s;
				}
			}

			.active {
				font-size: 30rpx;
				font-weight: bold;
				color: #fa2b47;

				&:after {
					width: 80rpx;
				}
			}
		}
	}

	.swiper-box {
		width: 100%;
		height: 700rpx;
		position: relative;

		.swiper {
			height: 700rpx;

			video {
				width: 100%;
				height: 100%;
			}

			image {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		.numBox {
			background-color: rgba(0, 0, 0, 0.55);
			position: absolute;
			bottom: 24rpx;
			right: 30rpx;
			padding: 6rpx 20rpx;
			border-radius: 30rpx;
			align-items: baseline;

			&>text:nth-of-type(1) {
				color: rgba(255, 255, 255, 0.85);
				font-size: 27rpx;
			}

			&>text:nth-of-type(2) {
				color: rgba(255, 255, 255, 0.75);
				font-size: 21rpx;
			}
		}
	}

	.main {
		background: linear-gradient(180deg, #fcfcfc 0%, #f6f6f6 5%, #f6f6f6 100%) !important;
		position: relative;
		z-index: 8;
		border-radius: 20px 20px 0px 0px;

		.price-box {
			padding-bottom: 10rpx;

			.left {
				.p2 {
					padding-left: 20rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					// text-decoration: line-through;
				}
			}

			.right {
				text-align: right;

				text {
					display: block;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: var(--text_1);
				}
			}
		}

		.debt-hint {
			font-size: 26rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #ffffff;
		}

		.goods-info {
			.title {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.des {
				padding: 20rpx 0 0rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
			}

			.collect {
				margin-top: 30rpx;
				border-top: 1rpx solid #f6f6f6;
				padding-top: 30rpx;

				text {
					padding-left: 10rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}
		}

		.specification {
			&>view {
				display: grid;
				grid-template-columns: 1fr 7fr 0.2fr;
				align-items: center;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;

				.left {
					color: #999999;
					white-space: nowrap;
				}

				&>text:nth-of-type(2) {
					color: #333333;
				}
			}

			.address {
				padding-top: 15rpx;

				text:nth-of-type(2) {
					color: #999999;
				}
			}
		}

		.rvaluate {
			.head {
				&>text {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}

				view {
					text {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #999999;
					}
				}
			}

			.tag {
				padding: 24rpx 0;

				text {
					background: #fef0ed;
					border-radius: 23rpx;
					padding: 10rpx 30rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #fa2b47;
				}

				text+text {
					margin-left: 20rpx;
				}
			}

			.rvaluate-u {
				padding-top: 25rpx;

				.user {
					image {
						width: 68rpx;
						height: 68rpx;
						border-radius: 50%;
					}

					.right {
						padding-left: 20rpx;

						text {
							display: block;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
							padding-bottom: 8rpx;
						}
					}
				}

				.centent {
					padding-top: 20rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				.selected {
					padding-top: 20rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666;
				}

				.img-box {
					padding-top: 20rpx;

					image {
						width: 140rpx;
						height: 140rpx;
						border-radius: 10rpx;
					}

					image+image {
						margin-left: 20rpx;
					}
				}
			}

			.r-footer {
				padding-top: 30rpx;

				&>view {
					display: inline-block;
					padding: 5rpx 18rpx 10rpx;
					border: 1px solid #999999;
					border-radius: 50rpx;

					text {
						display: inline-block;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #999999;
					}
				}
			}
		}
	}

	.goodsDescription {
		.h1 {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #323232;
			padding-bottom: 30rpx;
		}

		::v-deep img {
			display: inherit;
			width: 100%;
		}
	}

	.recommend {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-row-gap: 16rpx;
		grid-gap: 16rpx;
		padding-top: 20rpx;
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 9;
		padding: 12rpx 24rpx;
		background: #ffffff;
		box-sizing: border-box;
		display: flex;
		// grid-template-columns: 1fr 1.8fr;
		// grid-gap: 60rpx;

		.left {

			.box2,
			.box1 {
				margin-right: 35rpx;
			}

			.box {
				text-align: center;

				text {
					display: block;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #323232;
				}
			}
		}

		.right {
			// padding-left: 30rpx;

			.m-button {
				padding: 15rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 600;
				color: #ffffff;
				flex: 1;
			}

			.btn1 {
				margin-right: 10rpx;
				border: 0;
				color: #fff !important;
				background: #f4bf40;
			}
		}
	}

	.popup-goods {
		.goods-info {
			align-items: flex-start;

			.left {
				padding-right: 50rpx;
			}

			.right {
				align-items: flex-start;
				flex: 1;

				.h1 {
					.p2 {
						font-size: 26rpx;
						padding-left: 10rpx;
						color: #fa2b47;
					}
				}

				.stock {
					padding: 20rpx 0;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}

				.h2 {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				.pop_txt {
					margin-left: 10rpx;
				}
			}
		}

		.spec-box {
			overflow-y: hidden;
			padding-right: 20rpx;

			.swiper {
				max-height: 700rpx;
				min-height: 100rpx;
			}
		}

		.spec1 {
			padding: 15rpx 0;
			background: #f5f5f5;
			border-radius: 20rpx;
			border: 2rpx solid #f5f5f5;
			padding: 10rpx 15rpx;
			margin-bottom: 20rpx;

			.title {
				.goodsGuiGeName {
					margin-right: 20rpx;
					display: inline-block;
					flex: 1;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 600;
					color: #333;
				}

				.m-price {
					color: #999999 !important;
					font-weight: normal !important;
				}
			}



			.spec1-main {
				max-height: 500rpx;
				overflow-y: scroll;
			}
		}

		.active {
			background: #fef0ed;
			border: 2rpx solid #fa2b47;

			.m-price {
				color: #fa2b47 !important;
				// font-weight: 600 !important;
			}

			.goodsGuiGeName {
				color: #fa2b47 !important;
			}
		}

		.amount {
			padding: 10rpx 0 60rpx;
		}

		.btn-box {
			.m-button {
				flex: 1;
				padding: 20rpx 0;
			}

			.btn1 {
				color: #fff;
				background: #f4bf40;
			}

			.m-button+.m-button {
				margin-left: 30rpx;
			}
		}
	}

	.copy-popup {
		width: 582rpx;
		height: 264rpx;
		background: #ffffff;
		border-radius: 20rpx;

		.center {
			flex: 1;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		.btn-box {
			border-top: 1rpx solid #eeeeee;
			text-align: center;
			padding: 26rpx 0;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
	}

	.pticeTag {
		background: url('../../../static/images/pages/home/priceTag.png') no-repeat;
		background-size: 100% 64rpx;
		font-size: 21rpx;
		border-radius: 8rpx;
		color: #fff;
		height: 64rpx;
		box-sizing: border-box;
	}

	::v-deep .uni-numbox {
		.uni-numbox__minus {
			background: unset !important;

			// background-color: #dbdbdb !important;
			.uni-numbox--text {
				font-weight: bold !important;
			}
		}

		.uni-numbox__plus {
			background: unset !important;

			// background-color: #dbdbdb !important;
			.uni-numbox--text {
				font-weight: bold !important;
			}
		}

		.uni-numbox__value {
			border-radius: 4rpx !important;
			background-color: #dbdbdb !important;

			.uni-input-input {
				font-weight: bold !important;
			}
		}
	}

	.selfPickup {
		color: red !important;
	}
</style>